/* 整体大框 */
.hole-div{
    width: 100%;
    height: auto;
}
/* 手机顶部 */
.tel-top{
    height: 8vw;
    background-color: rgb(246, 246, 246);
}
/* 页面顶部大框 */
.top{
    display: flex;
    background-color: rgb(246, 246, 246);
    flex-direction: row;
    height: 15vw;
    justify-content: center;
    align-items: center;
}
/* 顶部左侧第一个图标大框 */
.top-icon-1{
    font-size: 5vw;
    flex-basis: 15%;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.fa-chevron-left{
    width: auto;
}
/* 顶部输入框 */
.top-input{
    flex-basis: 75%;
    background-color: rgb(255, 255, 255);
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70%;
    border-radius: 6px;
}
.top-mid{
    display: flex;
    justify-content: start;
    align-items: center;
    color: rgb(132, 132, 132);
}
.top-text{
    font-size: 5vw;
    color: rgb(132, 132, 132);
}
.fa-search{
    font-size: 5vw;
    background-color: #fff;
    width: auto;
    margin: 0 3vw;
}
/* 右侧图标 */
.top-left{
    font-size: 5vw;
    flex-basis: 19%;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.fa-share-square-o{
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fa-ellipsis-h{
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 商品大图 */
.top-div{
    background-color: rgb(250, 250, 250);
    width: 100%;
    height: auto;
    height: 80vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.top-img{
    background-color: rgb(250, 250, 250);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vw;
    
}
.img{
    width: 50vw;
    background-color: rgb(250, 250, 250);
}
.p-div{
    display: flex;
    justify-content: end;
}
.number{
    background-color: rgb(125, 125, 125);
    width: 10vw;
    display: flex;
    font-size: 1em;
    justify-content: center;
    align-items: center;
    margin-right: 5vw;
    border-radius: 30vw;
    height: 6vw;
    color: #fff;
    margin-bottom: 4vw;
}
/* fixed */
.fixed{
    position: fixed;
    width: 15vw;
    height: 15vw;
    right: 3vw;
    top:30vw;
    background-color: rgb(253, 253, 253);
    border-radius: 10px;
    border:0.2em solid rgb(212, 212, 212);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.f-icon{
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fixed-img{
    width: 6vw;
}
.fixed-p1{
    font-size: 0.9em;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fixed-p2{
    font-size: 0.1em;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 底部 */
/* 最大的框 ul*/
.footer{
    height: 18vw;
    width: 100%;
}
.fixed-footer{
    height: 15vw;
    width: 100%;
    background-color: rgb(255,255,255);
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-top: 0.1em solid rgb(242, 242, 242);
}
.ul-footer{
    flex-basis: 40%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 70%;
}
.icon-footer{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer-left-img{
    width: 5.5vw;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.test-p{
    font-size: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-top: 1vw;
}
.bottom-2{
    flex-basis: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255,255,255);
    height: 70%;
}
.left-b2{
    background-color: rgb(51, 51, 51);
    height: 100%;
    border-radius: 30vw 0 0 30vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.text-b2{
    color: rgb(246, 239, 194);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5vw;
    font-weight: 500;
}
.right-b2{
    background-color: rgb(254, 218, 78);
    height: 100%;
    border-radius: 0 30vw 30vw 0;
    color: rgb(31, 26, 18);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.text1-b2_r{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vw;
    font-weight: 600;
}
.text2-b2_r{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5vw;
    font-weight: 550;
}
/* 中部文字 */
.mid-text{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 3vw;
    justify-content: flex-start;
    align-self: start;
}
.text-top{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    width: 100%;
    height: auto;
    background-color: #fff;
}
/* 顶部第一个框 */
.top-div-1{
    display: flex;
    justify-content: space-between;
    margin-top: 2vw;
}
.left{
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.right{
    width: auto;
    display: flex;
    justify-content: end;
    align-items: center;
}
.top-icon{
    color: rgb(250, 71, 42);
    font-size: 4vw;
    display: flex;
    align-items: flex-end;
    margin-bottom: 2vw;
    height: 100%;
    width: auto;
    font-weight: 550;
}
.top-p1{
    color: rgb(250, 71, 42);
    font-size: 8vw;
    width: auto;
}
.top-div-1-mid{
    background-color: rgb(252, 74, 38);
    border-radius: 30vw;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 29vw;
    height: 8vw;
    margin-left: 2vw;
}
.mid-p1{
    width: auto;
    font-size: 3vw;
    font-weight: 550;
}
.mid-p2{
    width: auto;
    font-size: 6.5vw;
    font-weight: 500;
}
/* 顶部第二个框 */
.top-p3{
    font-size: 3vw;
    color: rgb(156, 156, 156);
    font-weight: 500;
}
.top-div-2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5vw;
    margin-top: 1vw;
}
.top-mid-left{
    display: flex;
    align-items: center;
    flex-basis: 80%;
    height: 100%;
}
.mid-kuang{
   
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.1vw solid rgb(236, 117, 62);
    border-radius: 5px;
    height: 60%;
    width: 30%;
    margin-right: 2vw;
}
.text-kuang{
    font-size: 2.4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(244, 80, 51);
}
.top-mid-right{
    flex-basis: 30%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: rgb(244, 80, 51);
}
.tmr-text{
    background-color: #fff;
    width: auto;
    margin-right: 2vw;
    font-size: 3vw;
}
.fa-chevron-right{
    width: auto;
    font-size: 1vw;
}
/* 顶部第三个框 */
.top-div-3{
    height: 8vw;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 1vw;
}
.d3-text{
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 4vw;
    font-weight: 600;
}
/* 顶部第四个框 */
.top-div-4{
    height: 8vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 1vw;
} 
.mid-bottom{
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100%;
}
.mb-li{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 29vw;
    border: 0.2vw solid rgb(211, 211, 211);
    height: 60%;
    font-size: 2.5vw;
    border-radius: 2px;
    color: rgb(137, 137, 137);
    margin-right: 2vw;
}
.fa-map-marker{
    flex-basis: 20%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mb-li-p{
    flex-basis: 80%;
    width: auto;
}
.fa-line-chart{
    flex-basis: 20%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 中部 */
.text-mid{
    margin-top: 2vw;
    border-top: 1vw solid rgb(246, 246, 246);
    border-bottom: 1vw solid rgb(246, 246, 246);
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 3vw;
    height: 8vw;
}
.mid-text-1{
    width: 10vw;
    display: flex;
    justify-content: start;
    align-items: center;
    color: rgb(146, 146, 146);
}
.mid-text-2{
    
    /* 段落中的文本不进行换行 */
    white-space:nowrap; 
    /* 超出宽度部分隐藏  */
    overflow:hidden; 
    /* 当文本溢出时，要发生的事。有三个值：  clip -  修剪文本；ellipsis - 显示省略号来代表被修剪的文本；string - 使用给定的字符串来代表被修剪的文本 */
    text-overflow:ellipsis; 
     /*宽度自己设定，一定要有  */
    width: 100vw; 
}
.mid-text-3{
    width: 10vw;
    display: flex;
    justify-content: end;
    align-items: center;
    
}
.fa-chevron-right{
    color: rgb(135, 135, 135);
}
/* 文字底部 */
.text-footer{
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.tf-t1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8vw;
}
.tf-left{
    font-size: 3vw;
    font-weight: 550;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.tf-right{
    font-size: 2.5vw;
    font-weight: 550;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: rgb(170, 170, 170);
}
/* 中部框 */
.tf-t2{
    height: 7vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tf-all{
    display: flex;
    justify-content: start;
    align-items: center;
    height: 100%;
}
.tf-li{
    background-color: rgb(244, 244, 244);
    height: 80%;
    font-size: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20vw;
    margin-right: 2vw;
    border-radius: 2px;
}
/* 评论 */
.tf-t3{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    margin-top: 2vw;
}
.tf-pj{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
}
.pj-li{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    border-bottom: 0.2vw solid rgb(214, 231, 246);
}
.pj-top{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 10vw;
}
.pj-left-img{
    background-color: rgb(246, 246, 246);
    width: 8vw;
    height: 8vw;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.1vw solid rgb(218, 218, 218);
}
.pl-yhtx{
    width: 8vw;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2vw;
}
.pj-right{
    width: auto;
}
.fa-ellipsis-h{
    color: rgb(192, 207, 220);
}
.pj-mid-text{
    margin-left: 2vw;
}
.pj-name{
    font-size: 2.5vw;
    font-weight: 550;
}
.pj-date{
    font-size: 1vw;
}
.pj-mid{
    display: flex;
    justify-content: center;
    align-items: center;
}
.fa-thumbs-up{
    width: auto;
    color: rgb(241, 204, 52);
    margin-right: 1vw;
    margin-left: 2vw;
}
.pj-mid-p{
    font-size: 2.5vw;
}
.pj-bottom{
    margin-top: 3vw;
}
.pj-bo-p{
    font-size: 2vw;
    margin-left: 1vw;
}
.pj-img{
    width: 15vw;
    margin-right: 1vw;
    margin-top: 1vw;
    background: rgb(224, 224, 224);
}
/* 购物车 */
.gwc{
    background-color: #fff;
    border-radius: 100%;
    width: 10vw;
    height: 10vw;
    position: fixed;
    bottom: 30vw;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0.2vw 0.2vw rgb(235, 235, 235);
}
.gwc-img{
    width: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}